<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import sallitePng from '@/assets/bit-screen/schedule-mge/satelliteMap.png'
import TDMapPng from '@/assets/bit-screen/schedule-mge/TDMap.png'
const cursor = ref({ cursor: '' })
const props = defineProps({
  mapStatus: {
    type: Number
  },
  routeNetVal: {
    type: Boolean
  }
})
const radio1 = ref(null)
const mapList = ref([
  { name: '卫星地图', bg: sallitePng },
  { name: '电子地图', bg: TDMapPng }
])
const routeNetValue = ref(false)
const emit = defineEmits<{
  (e: 'update', payload: { status: number; routeNet: boolean }): void
}>()
// 切换底图，路网
const switchMap = (index: number) => {
  emit('update', { status: index, routeNet: routeNetValue.value })
}
watchEffect(() => {
  if (props.mapStatus === 0) {
    radio1.value = 1
  } else {
    radio1.value = 2
  }
  routeNetValue.value = props.routeNetVal
})
</script>

<template>
  <!-- 底图切换控制按钮 -->
  <div class="maptab">
    <div class="maptabs_box" :style="cursor">
      <div
        v-for="(item, index) in mapList"
        :key="index"
        class="layer1"
        :style="{ backgroundImage: 'url(' + item.bg + ')' }"
      >
        <div class="title" :class="{ 'checked-bg': index === radio1 - 1 }">
          <el-radio-group v-model="radio1" @change="switchMap(index)">
            <el-radio :value="index + 1" size="small">{{ item.name }}</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="routeSwitch">
      <el-switch v-model="routeNetValue" size="small" @change="switchMap(radio1 - 1)" />
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-radio.el-radio--small) {
  height: 20px !important;
}
:deep(.el-radio__label) {
  padding-left: 4px !important;
}
.maptab {
  position: absolute;
  right: 15%;
  bottom: 13%;
  background: rgba(9, 36, 74, 0.9);
  border-radius: 2px;
  border: 1px solid #18497a;
  padding: 10px;
  padding-bottom: 0;

  .maptabs_box {
    width: 150px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 2px rgb(0 0 0 /25%);

    .layer1 {
      width: 48%;
      height: 50px;
      position: relative;
      .title {
        width: 100%;
        display: flex;
        background-color: black;
        height: 20px;
        position: absolute;
        bottom: -20px;
        line-height: 20px;
        font-size: 12px;
        padding-left: 5px;
      }
      .checked-bg {
        background-color: #545454;
      }
    }
  }
  .routeSwitch {
    position: absolute;
    bottom: 3px;
    right: 10px;
    font-size: 12px;
  }
}
</style>
